import 'package:effective/model/result_entity.dart';
import 'package:effective/service/api.dart';
import 'package:effective/utils/base_view.dart';
import 'package:effective/view_model/upload_viewmodel.dart';
import 'package:effective/view_model/user_model.dart';
import 'package:effective/widget/common_dialog.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../widget/common_dialog.dart';

class Upload extends StatefulWidget {
  Upload({Key key}) : super(key: key);

  @override
  _UploadState createState() => _UploadState();
}

class _UploadState extends State<Upload> {
  TextStyle textStyle = TextStyle(
    fontWeight: FontWeight.w600,
    fontSize: 20,
  );

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BaseView<UploadViewModel>(
      model: UploadViewModel(api: API()),
      onModelReady: (model) async {
        await model.loadData(context);
      },
      builder: (context, model, child) {
        return Scaffold(
          appBar: PreferredSize(
            child: AppBar(
              elevation: 0,
              foregroundColor: Colors.white,
              backgroundColor: Colors.white,
              title: Container(
                margin: EdgeInsets.fromLTRB(87, 25, 0, 16),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      child: Text.rich(TextSpan(children: [
                        TextSpan(
                            text: 'E',
                            style: TextStyle(fontSize: 28, color: Colors.blue)),
                        TextSpan(
                            text: '-ffective',
                            style:
                                TextStyle(fontSize: 25, color: Colors.black)),
                      ])),
                    ),
                    Expanded(
                      child: Container(),
                      flex: 1,
                    ),
                    Container(
                      margin: EdgeInsets.fromLTRB(0, 0, 25, 0),
                      child: Row(
                        children: [
                          Container(
                            margin: EdgeInsets.only(right: 20),
                            child: Provider.of<UserModel>(context).value == ""
                                ? Text(
                                    '请登录后操作',
                                    style: TextStyle(
                                        fontSize: 20, color: Colors.black),
                                  )
                                : Text.rich(TextSpan(children: [
                                    TextSpan(
                                      text: 'Hello, ',
                                      style: TextStyle(
                                          fontSize: 20, color: Colors.black),
                                    ),
                                    TextSpan(
                                      text:
                                          Provider.of<UserModel>(context).value,
                                      style: TextStyle(
                                          fontSize: 20, color: Colors.blue),
                                    ),
                                  ])),
                          ),
                          Provider.of<UserModel>(context).value == ""
                              ? Container(
                                  height: 35,
                                  width: 105,
                                  child: OutlineButton(
                                    borderSide: BorderSide(
                                        width: 2, color: Colors.blue),
                                    textColor: Colors.blue,
                                    color: Colors.white,
                                    shape: RoundedRectangleBorder(
                                        side: BorderSide.none,
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(50))),
                                    onPressed: () async {
                                      model.login(context);
                                    },
                                    child: Text(
                                      'LOG IN',
                                      style: TextStyle(fontSize: 16),
                                    ),
                                  ),
                                )
                              : Container(
                                  height: 35,
                                  width: 105,
                                  child: OutlineButton(
                                    borderSide: BorderSide(
                                        width: 2, color: Colors.blue),
                                    textColor: Colors.blue,
                                    color: Colors.white,
                                    shape: RoundedRectangleBorder(
                                        side: BorderSide.none,
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(50))),
                                    onPressed: () async {
                                      model.logout(context);
                                    },
                                    child: Text(
                                      'LOG OUT',
                                      style: TextStyle(fontSize: 16),
                                    ),
                                  ),
                                ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
              automaticallyImplyLeading: false,
            ),
            preferredSize: Size(double.infinity, 70),
          ),
          body: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  color: Colors.grey[500],
                  height: 2,
                  width: double.infinity,
                ),
                Expanded(
                  child: SingleChildScrollView(
                    child: mainPage(context, model),
                  ),
                  flex: 1,
                ),
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: 79,
                  child: Image.asset(
                    'assets/bottom.png',
                    fit: BoxFit.fill,
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget mainPage(BuildContext context, UploadViewModel model) {
    return Container(
      margin: EdgeInsets.fromLTRB(94, 0, 94, 0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.only(top: 20),
            child: Center(
              child: Text(
                'UPLOAD YOUR SPEECH DATA',
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),
              ),
            ),
          ),
          notice(context, model),
          mainQuestion(context, model),
          Container(
            margin: EdgeInsets.fromLTRB(40, 40, 40, 20),
            child: Wrap(
              alignment: WrapAlignment.start,
              children: [
                Container(
                  child: Checkbox(
                    value: model.agreeVolunteer,
                    onChanged: (value) => model.changeVolunteer(value),
                  ),
                ),
                Container(
                  child: Text(
                      'I volunteer to upload my speech data and agree the research team to ues my data under the IRB. Also I am willing to receive the e-mails from the research team',
                      style: TextStyle(fontSize: 20)),
                )
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              MaterialButton(
                height: 49,
                minWidth: 105,
                elevation: 0,
                textColor: Colors.white,
                color: Color(0xFF7484F4),
                shape: RoundedRectangleBorder(
                    side: BorderSide.none,
                    borderRadius: BorderRadius.all(Radius.circular(50))),
                onPressed: () async => model.submit(context),
                child: Text(
                  'SUBMIT',
                  style: TextStyle(fontSize: 16),
                ),
              ),
              Container(
                height: 40,
                width: 100,
                child: OutlineButton(
                  borderSide: BorderSide(width: 2, color: Colors.blue),
                  textColor: Colors.blue,
                  color: Colors.white,
                  shape: RoundedRectangleBorder(
                      side: BorderSide.none,
                      borderRadius: BorderRadius.all(Radius.circular(50))),
                  onPressed: () => model.reset(),
                  child: Text(
                    'RESET',
                    style: TextStyle(fontSize: 16),
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    );
  }

  Widget notice(BuildContext context, UploadViewModel model) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
      padding: EdgeInsets.fromLTRB(19, 30, 19, 15),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey[500], width: 1),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            child: Text.rich(TextSpan(children: [
              TextSpan(
                  text: 'Notice: ',
                  style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20)),
              TextSpan(
                  text:
                      'The uploaded data will be used for academic research and non-profit usage. Your video and personal information will never be leaked to anyone without your permission. By contributing your data, you will enjoy the research results including the visual analysis system and more. The visual analysis system will be open to you in 3-4 weeks for data processing and more results will be open in the future. We will send e-mails to you for informing new updates and also you can log in this system to check what’s going on recently.',
                  style: TextStyle(fontSize: 20))
            ])),
          ),
          Container(
            margin: EdgeInsets.only(top: 20),
            child: Wrap(
              alignment: WrapAlignment.center,
              children: [
                Container(
                  child: Text.rich(TextSpan(children: [
                    TextSpan(
                        text:
                            'Please read the IRB before you upload any data  ',
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.w600)),
                    TextSpan(
                        text: '(click here)',
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.w600),
                        recognizer: TapGestureRecognizer()
                          ..onTap = () async {
                            //open
                            bool result =
                                await CommonDialog.collectionConfirmDialog(
                                    context);
                            model.changeNoticeState(result);
                            //TODO 待定
                          }),
                  ])),
                ),
                Container(
                  margin: EdgeInsets.only(left: 30),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Checkbox(
                        value: model.agreeNotice,
                        onChanged: (value) => model.changeNoticeState(value),
                      ),
                      Container(
                        child: Text(
                          'I understand the IRB and agree to it.',
                          style: TextStyle(
                            fontWeight: FontWeight.w600,
                            fontSize: 20,
                          ),
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget mainQuestion(BuildContext context, UploadViewModel model) {
    return Container(
      margin: EdgeInsets.only(top: 30),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.fromLTRB(0, 0, 0, 30),
            child: Row(
              children: [
                Expanded(
                  child: Row(
                    children: [
                      Container(
                        child: Text(
                          'Speaker Name',
                          style: textStyle,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 25),
                        child: input(model.speakerName),
                      ),
                    ],
                  ),
                  flex: 1,
                ),
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        child: Text(
                          'Gender            ',
                          style: textStyle,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 25),
                        child: input(model.gender),
                      ),
                    ],
                  ),
                  flex: 1,
                ),
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Container(
                        child: Text(
                          'Native Language',
                          style: textStyle,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 25),
                        child: input(model.nativeLanguage),
                      ),
                    ],
                  ),
                  flex: 1,
                )
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(0, 0, 0, 30),
            child: Row(
              children: [
                Expanded(
                  child: Row(
                    children: [
                      Container(
                        child: Text(
                          'Speech Title    ',
                          style: textStyle,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 25),
                        child: input(model.speechTitle,
                            width:
                                MediaQuery.of(context).size.width * 95 / 200),
                      ),
                    ],
                  ),
                  flex: 2,
                ),
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Container(
                        child: Text(
                          'Speech District',
                          style: textStyle,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 25),
                        child: input(model.speechDistrict),
                      ),
                    ],
                  ),
                  flex: 1,
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(0, 0, 0, 30),
            child: Row(
              children: [
                Expanded(
                  child: Row(
                    children: [
                      Container(
                        child: Text(
                          'Contest/Training',
                          style: textStyle,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 25),
                        child: input(model.contestTraining),
                      ),
                    ],
                  ),
                  flex: 1,
                ),
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        child: Text(
                          'Speech Level',
                          style: textStyle,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 25),
                        child: input(model.speechLevel),
                      ),
                    ],
                  ),
                  flex: 1,
                ),
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Container(
                        child: Text(
                          'Speech Rank',
                          style: textStyle,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 25),
                        child: input(model.speechRank),
                      ),
                    ],
                  ),
                  flex: 1,
                )
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(0, 0, 0, 30),
            child: Wrap(
              alignment: WrapAlignment.start,
              children: [
                Container(
                  margin: EdgeInsets.only(right: 25),
                  child: Text(
                    'Speech Theme',
                    style: textStyle,
                  ),
                ),
                Container(
                  width: 120,
                  height: 30,
                  child: OutlinedButton(
                    child: Text(model.theme ?? '请选择Theme'),
                    onPressed: () async {
                      ResultEntity resultEntity =
                          await CommonDialog().speechTheme(context);
                      if (resultEntity.code == 200) {
                        model.changeTheme(resultEntity.data);
                      }
                    },
                  ),
                )
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(0, 0, 0, 30),
            child: Wrap(
              alignment: WrapAlignment.start,
              children: [
                Container(
                  margin: EdgeInsets.only(right: 25),
                  child: Text(
                    'Speech Tags',
                    style: textStyle,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 10),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        child: Checkbox(
                            value: model.positive,
                            onChanged: (_) => model.changePositive()),
                      ),
                      Container(
                        child: Text(
                          'Positive',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 10),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        child: Checkbox(
                            value: model.negative,
                            onChanged: (_) => model.changeNegative()),
                      ),
                      Container(
                        child: Text(
                          'Negative',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 10),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        child: Checkbox(
                            value: model.happyEnding,
                            onChanged: (_) => model.changeHappy()),
                      ),
                      Container(
                        child: Text(
                          'Happy',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 10),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        child: Checkbox(
                            value: model.sadEnding,
                            onChanged: (_) => model.changeSadEnding()),
                      ),
                      Container(
                        child: Text(
                          'SadEnding',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 10),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        child: Checkbox(
                            value: model.happyStart,
                            onChanged: (_) => model.changeHappyStart()),
                      ),
                      Container(
                        child: Text(
                          'HappyStart',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 10),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        child: Checkbox(
                            value: model.sadStart,
                            onChanged: (_) => model.changeSadStart()),
                      ),
                      Container(
                        child: Text(
                          'SadStart',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 10),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        child: Checkbox(
                            value: model.upAndDown,
                            onChanged: (_) => model.changeUpAndDown()),
                      ),
                      Container(
                        child: Text(
                          'UpAndDown',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 25),
                  child: input(model.speechTags),
                ),
              ],
            ),
          ),
          Container(
            child: Row(
              children: [
                Container(
                  child: Text(
                    'Speech Video',
                    style: textStyle,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 25),
                  child: RaisedButton(
                    child: Text('选择文件'),
                    onPressed: () async {
                      model.chooseFile();
                    },
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 10),
                  child: model.fileName == ""
                      ? Text('未选择任何文件')
                      : Text(model.fileName),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget input(TextEditingController textEditingController,
      {double width = 250}) {
    return Container(
      width: width,
      height: 31,
      decoration:
          BoxDecoration(border: Border.all(color: Colors.black, width: 2)),
      child: TextField(
        controller: textEditingController,
        maxLines: 1,
        decoration: InputDecoration(
            border: InputBorder.none,
            contentPadding: EdgeInsets.fromLTRB(1, 0, 0, 20)),
        style: TextStyle(fontSize: 18),
        cursorHeight: 24,
      ),
    );
  }
}
